<template>
  <div class="form-par">
    <div class="form">
      <div>
        <label>
          <i class="fa fa-phone"></i>
          <input type="text" name="phone" placeholder="您的手机号码" v-model="phone" autocomplete="off">
        </label>
      </div>
      <div class="fixed">
        <label>
          <i class="fa fa-photo"></i>
          <input type="text" name="piccode" placeholder="图形验证码" v-model="picCode" autocomplete="off">
        </label>
        <img class="fixed-tar" src="http://shop.domall.cc/web/index.php?c=utility&a=code&r=1528188714183" alt="图片验证码">
      </div>
      <div class="fixed">
        <label>
          <i class="fa fa-comment-o"></i>
          <input type="text" name="smscode" placeholder="5位短信验证码" v-model="smsCode" autocomplete="off">
        </label>
        <input type="button" class="fixed-tar fixed-tar-btn" :class="{getting:isCalculation}" @touchstart="getCode"
               v-model="timeNum">
      </div>
      <div>
        <label>
          <i class="fa fa-key"></i>
          <input type="text" name="password" placeholder="请输入登录密码" v-model="password" autocomplete="off">
        </label>
      </div>
      <div>
        <label>
          <i class="fa fa-key"></i>
          <input type="text" name="confirmPwd" placeholder="请重新输入登录密码" v-model="confirmPwd" autocomplete="off">
        </label>
      </div>
      <div class="btn-par">
        <input type="submit" v-if="!loading" value="立即找回" @touchstart="register">
        <input type="submit" v-if="loading" value="找回中...">
      </div>
    </div>
    <div class="bottom-btn clear">
      <router-link to="/loginRegister/register">立即注册</router-link>
      <router-link to="/loginRegister/login">立即登录</router-link>
    </div>
  </div>
</template>

<script>
  import {md, validMsg, timer, initBtnVal, falseHints, getErrMsg} from "../../assets/js/common";
  import {getData, getSmsCode} from '../../api/index'

  export default {
    name: "register",
    data() {
      return {
        phone: "",
        picCode: "",
        smsCode: "",
        password: "",
        confirmPwd: "",
        loading: false,
        timeNum: '获取验证码',
        time: validMsg().validReg.smsTime,
        isCalculation: false,
        timers: ""
      }
    },
    methods: {
      /*手机号码验证*/
      phoneValidate: function () {
        let phoneReg = validMsg().validReg.phoneReg;
        if (!this.phone) {
          return validMsg().message.noPhone;
        } else if (this.phone && !phoneReg.test(this.phone)) {
          return validMsg().message.errPhone
        }
      },
      /*图片验证码验证*/
      picCodeValidate: function () {
        if (!this.picCode) {
          return validMsg().message.noPicCode
        }
      },
      /*短信验证码验证*/
      smsCodeValidate: function () {
        if (!this.smsCode) {
          return validMsg().message.noSmsCode
        }
      },
      /*密码验证*/
      passwordValidate: function () {
        if (!this.password) {
          return validMsg().message.noPassword
        } else if (this.password && this.password.length < 6) {
          return validMsg().message.errPassword
        }
      },
      /*重复密码验证*/
      confirmPwdValidate: function () {
        if (!this.confirmPwd) {
          return validMsg().message.noConfirmPwd
        } else if (this.confirmPwd && this.confirmPwd !== this.password) {
          return validMsg().message.errConfirmPwd
        }
      },
      /*获取短信验证码*/
      getCode: function () {
        this.time = validMsg().validReg.smsTime;
        let errorMsg = this.phoneValidate() + "," + this.picCodeValidate();
        if (getErrMsg(errorMsg).length > 0) {
          falseHints(getErrMsg(errorMsg)[0])
        } else {
          timer(this);
          getSmsCode(this, {phone: this.phone, picCode: this.picCode}).then((data) => {
            if (data.body.code) {

            }

          }).catch((err) => {
            initBtnVal(this);
            clearInterval(this.timers)
          })
        }

      },
      register: function () {
        let errorMsg = this.phoneValidate() + "," + this.picCodeValidate() + "," + this.smsCodeValidate() + "," + this.passwordValidate() + "," + this.confirmPwdValidate();
        let needErrArr = getErrMsg(errorMsg)
        if (needErrArr.length > 0) {
          falseHints(needErrArr[0])
        } else {
          if (!this.loading) {
            getData({
              tar: this,
              url: "api/api/postReg",
              method: "POST",
              data: {
                phone: this.phone,
                picCode: this.picCode,
                smsCode: this.smsCode,
                password: md(this.password)
              }
            }).then((response) => {
              this.loading = false;
              console.log(response);
            }).catch((error) => {
              this.loading = false;
            })

          }
        }


      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/loginReg.css";

  .form-par {
    margin-top: 0;
  }

  .form-par .form .fixed {
    position: relative;
  }

  .form-par .form .fixed .fixed-tar {
    position: absolute;
    right: 0.03125rem;
    top: 0.05875rem;
    width: 0.28125rem;
    height: 0.075rem;
    z-index: 101;
    text-align: center;
    line-height: 0.075rem;
    outline: none;
    box-sizing: border-box;
    border-radius: 0.0375rem;
  }

  .form-par .form .fixed .fixed-tar-btn {
    background: #ec4a48;
    color: #fff;
    border: 0;

  }

  .form-par .form .fixed .getting {
    border: 1px solid #acacac;
    background-color: #fff;
    color: #acacac;
  }

  .form-par .form .btn-par {
    margin: 0.03125rem 0;
  }

  .bottom-btn {
    padding: 0.03125rem;
    box-sizing: border-box;
  }

  .bottom-btn a {
    color: #333;
    opacity: .8;
    font-size: 0.04375rem;
  }

  .bottom-btn a:nth-child(1) {
    float: left;
  }

  .bottom-btn a:nth-child(2) {
    float: right;
  }
</style>
